<template>
  <base-breadcrumb :title="title">
    <!-- 质量岗位责任制详情 -->
    <a-form-model ref="ruleForm" :model="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" :rules="editModel != 0 ? rules : {}" id="base-breadcrumb" style="position: relative">
      <a-spin :spinning="loading">
        <!-- 基础信息 -->
        <a-card :bordered="false" style="margin-bottom: 50px">
          <title-name title="基础信息"></title-name>
          <custom-form :formList="formList" :isEmit="false" :form="form" :editModel="editModel == 0 ? 'V' : ''" @selectOrg="selectOrg"></custom-form>
          <title-name :title="editModel == 0 ? '下发信息' : '责任书分发清单'"></title-name>
          <div class="mb20">
            <excel ref="exportSelect" fileName="质量岗位责任制选中" is-click-generate="false">
              <a-button
                icon="download"
                type="primary"
                slot="excelBtn"
                class="excelBtn"
                :disabled="selectedRowKeys.length < 1"
                :loading="exportExcelLoading[0]"
                @click="exportExcel(0)"
              >
                导出选中
              </a-button>
            </excel>
            <excel ref="exportAll" fileName="质量岗位责任制全部" is-click-generate="false">
              <a-button
                icon="download"
                type="primary"
                slot="excelBtn"
                class="excelBtnAll"
                :loading="exportExcelLoading[1]"
                @click="exportExcel(1)"
              >
                全部导出
              </a-button>
            </excel>
          </div>
          <list-table ref="table" size="default" :startIndex="0" rowKey="id" :isShowColumnFilter="false" :columns="columns" :request="loadData" :isShowCountBar="false" :alert="true" :showPage="false"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }">
            <span slot="operation" slot-scope="text, record">
              <MoreButton>
                <a v-if="record.status === 'PAST'" @click="detailFc(record)" v-btnPermission="'bm_003_loo_04'">查看</a>
                <BasePrintButton  v-if="record.status === 'PAST'"
                buttonType="a"
                v-btnPermission="[
                      {
                        ident: 'prma_seex',
                        code: 'seex_qm_049_pri_03'
                      },
                      {
                        ident: 'prma_buco',
                        code: 'buco_qm_049_pri_03'
                      }
                  ]"
                    :beforePrintFn="() => getPritContent(record.qualityDutyId)"
                  />
              </MoreButton>
            </span>
          </list-table>
        </a-card>
      </a-spin>
      <!-- 页脚操作栏 -->
      <div class="tool-btns--fixed btn_box page-btn-right-top">
        <a-button type="primary" @click="$multiTab.close()">关闭</a-button>
      </div>
    </a-form-model>
  </base-breadcrumb>
</template>

<script>
import { duty, queryEmployee } from '@/api/quality/quality' // api
import BaseEditPage from '@/views/baseEditPage' // 编辑详情页基础配置
import BasePrintButton from '@/components/BasePrintButton' // 打印按钮
const columns = [
 {
    title: '序号',
    dataIndex: 'index',
    width: 80,
  },
  {
    title: '员工名称',
    dataIndex: 'employeeName',
    width: 200,
  },
  {
    title: '岗位',
    dataIndex: 'postName',
    width: 200,
  },
  {
    title: '人员状态',
    dataIndex: 'employeeStatusText',
    width: 200,
  },
  {
    title: '责任书名称',
    dataIndex: 'bookName',
    width: 200,
  },
  {
    title: '下发人',
    dataIndex: 'dutyName',
    width: 200,
  },
  {
    title: '下发时间',
    dataIndex: 'dutyTime',
    width: 200,
  },
  {
    title: '签署时间',
    dataIndex: 'signTime',
    width: 200,
  },
  {
    title: '状态',
    dataIndex: 'statusText',
    scopedSlots: { customRender: 'status' },
    width: 200,
  },
  {
    title: '操作',
    dataIndex: 'operation',
    width: 200,
    scopedSlots: { customRender: 'operation' },
  }
]
const customColumns = [
{
    title: '序号',
    dataIndex: 'index',
    width: 80,
  },
  {
    title: '员工名称',
    dataIndex: 'employeeName',
    width: 200,
  },
  {
    title: '岗位',
    dataIndex: 'postName',
    width: 200,
  },
  {
    title: '人员状态',
    dataIndex: 'employeeStatusText',
    width: 200,
  },
  {
    title: '责任书名称',
    dataIndex: 'bookName',
    width: 200,
  },
  {
    title: '下发人',
    dataIndex: 'dutyName',
    width: 200,
  },
  {
    title: '下发时间',
    dataIndex: 'dutyTime',
    width: 200,
  },
  {
    title: '签署时间',
    dataIndex: 'signTime',
    width: 200,
  },
  {
    title: '状态',
    dataIndex: 'statusText',
    width: 200,
  },
  ]
export default {
  name: 'a' + Date.now(),
  extends: new BaseEditPage(),
  components: {BasePrintButton},

  data() {
    this.columns = columns
    this.customColumns = customColumns
    return {
      selectedRowKeys: [],
      selectedRows: [],
      exportExcelLoading: {0: false, 1: false}, // 导出加载控件
      loading: false, // 详情加载loading
      listLoading: false, // 列表加载loading
      editModel: 0, // 0 查看；1 编辑；2 新增
      form: {
        employees: [],
        viewName: ''
      },
      rules: {
        branchComId: [{ required: true, message: '请选择分公司名称', trigger: 'change' }],
        projectId: [{ required: true, message: '请选择项目名称', trigger: 'change' }]
      }, // 表单校验规则
      titles: ['查看质量岗位责任制', '编辑质量岗位责任制', '新增质量岗位责任制'], // 标题
      loadData: () => {
        if (this.editModel != 2) {
          this.loading = true
          return duty.getDetail({ id: this.id }).then(res => {
              this.loading = false
              if (res.code === 200) {
                this.form = res.data
                this.form.viewName = this.form.branchComName + '/' + this.form.projectName
                res.data.list = res.data.list.map((item,index)=>{
                  item.index = index + 1
                  item.employeeStatusText = item.employeeStatus == 1 ? '在岗' : '离岗'
                  let obj = {PAST:'已签署',SUBMITTED:'签署中',DRAFT:'未下发','null':'未下发'}
                  item.statusText = obj[item.status]
                  return item
                })
                return res
              }
            })
            .catch(() => {
              this.loading = false
            })
        }
      }
    }
  },
  mounted() {
    this.$refs.exportSelect.tableToExcelFile({columns: customColumns}, 0)
    this.$refs.exportAll.tableToExcelFile({columns: customColumns}, 0)
  },
  computed: {
    // 表单配置项
    formList() {
      return [
        {
          label: '所属单位',
          type: 'orgTree',
          keyName: 'projectId',
          rules: [{ required: true, message: '请选择项目名称', trigger: 'change' }],
          span: 16,
          isAutoSelectFirst: true,
          isNeedAuth: true,
          checkStrictly: true,
          disabled: this.editModel == 0,
          isNoBorder: this.editModel == 0,
          viewName: 'viewName'
        },
      ]
    }
  },
  methods: {
    /**
     * @description: 导出word
     * @param {*} datas：选中项
     */
     exportExcel(index) {
      if (index) {
        this.exportExcelLoading[1] = true
        return duty.getDetail({id: this.id}).then((res) => {
          if (res.data) {
            let rows = res.data.list.filter(item => item.status === 'PAST').map((item,index) => {
              item.index = index + 1
              item.employeeStatusText = item.employeeStatus == 1 ? '在岗' : '离岗'
              let obj = {PAST:'已签署',SUBMITTED:'签署中',DRAFT:'未下发','null':'未下发'}
              item.statusText = obj[item.status]
              return item
            })
            if (rows.length === 0) {
              this.$message.warning('没用已签署的数据')
              return false
            }
            this.$refs.exportAll.setDataAndGenerate(rows)
          }
        }).finally(() => {
          setTimeout(() => {
            this.exportExcelLoading[1] = false
          }, 500)
        })
      } else {
        if (this.selectedRows.length > 0) {
          this.exportExcelLoading[0] = true
          let rows = this.selectedRows.filter(item => item.statusText === '已签署').map((item,index) => {
              item.index = index + 1
              return item
            })
            if (rows.length === 0) {
              this.exportExcelLoading[0] = false
              this.$message.warning('没用已签署的数据')
              return false
            }
            this.$refs.exportSelect.setDataAndGenerate(rows)
            setTimeout(() => {
              this.exportExcelLoading[0] = false
            }, 500)
        } else {
          this.$message.warning('请选择需要导出的数据')
        }
      }
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    /**
     * 查看详情
     * id：业务id
     */
     detailFc(record){
        let query = {
          editModel: '0'
        }
        if (record && record.qualityDutyId) {
          query.id = record.qualityDutyId
        }
        this.$router.push({
          name: 'dutySystemView',
          query
        })
     },
    /**
     * 获取打印内容
     * id：业务id
     */
     getPritContent(id) {
      return duty
        .batchPrintPdf({
          id: id
        })
        .then((res) => {
          if (res.data[0]?.content) {
            return res.data[0].content
          }
        })
    },
    selectOrg(val) {
      this.form.branchComId = val[val.length - 2].orgId
      // 请求质量责任书列表
      this.listLoading = true
      queryEmployee
        .getList({ projectId: this.form.projectId })
        .then(res => {
          this.listLoading = false
          if (res.code === '0') {
            this.form.employees = res.data || []
          }
        })
        .catch(() => {
          this.listLoading = false
        })
    },
  }
}
</script>
<style lang="less" scoped>
/deep/ .ant-calendar-picker {
  width: 100% !important;
}
</style>
